/* UI组件交互模块 - 下拉菜单功能 */
export function initDropdowns() {
  const dropdowns = document.querySelectorAll('.dropdown');
  
  dropdowns.forEach(dropdown => {
    // 支持多种选择器：.dropdown-toggle 类或 id="userMenuButton"
    const toggle = dropdown.querySelector('.dropdown-toggle, button[id="userMenuButton"]');
    const menu = dropdown.querySelector('.dropdown-menu');
    
    if (toggle && menu) {
      // 点击切换下拉菜单显示状态
      toggle.addEventListener('click', function(e) {
        e.stopPropagation();
        dropdown.classList.toggle('show');
        // 直接操作菜单显示/隐藏
        menu.classList.toggle('hidden');
      });
      
      // 点击菜单项后关闭下拉菜单但不阻止默认行为（允许链接跳转）
      const items = menu.querySelectorAll('.dropdown-item');
      items.forEach(item => {
        item.addEventListener('click', function(e) {
          dropdown.classList.remove('show');
          menu.classList.add('hidden');
          // 不阻止默认行为，确保链接能正常跳转
        });
      });
    }
  });
  
  // 点击页面其他地方关闭所有下拉菜单
  document.addEventListener('click', function(e) {
    // 检查点击目标是否在下拉菜单或切换按钮内
    if (!e.target.closest('.dropdown')) {
      dropdowns.forEach(dropdown => {
        dropdown.classList.remove('show');
        const menu = dropdown.querySelector('.dropdown-menu');
        if (menu) {
          menu.classList.add('hidden');
        }
      });
    }
  });
  
  // 防止下拉菜单内的点击事件冒泡
  document.addEventListener('click', function(e) {
    if (e.target.closest('.dropdown-menu')) {
      e.stopPropagation();
    }
  });
}